<template>
   <div>
    <div id="terminal">
      <!-- 黑窗口 -->
    </div>
  </div>
</template>

<script>
//黑窗口插件
  import {Terminal} from 'xterm'
  import * as attach from 'xterm/lib/addons/attach/attach' // 安装插件，可以使用attach去添加
  import * as fit from 'xterm/lib/addons/fit/fit' // fit进行自适应大小的
  Terminal.applyAddon(attach) // 添加插件
  Terminal.applyAddon(fit) // 添加插件
export default {
    data(){
        return{

        }
    },
    mounted() {
      let terminalContainer = document.getElementById('terminal')  // 获取终端div标签
      this.term = new Terminal()  // 初始化一个终端对象
      this.term.open(terminalContainer)  // 将终端div标签以终端的形式打开
      this.terminalSocket = new WebSocket('ws://127.0.0.1:8000/webssh/')  // //实例化一个websocket，用于和django建立连接
      this.terminalSocket.onopen = function () { // 连接成功触发该方法
        console.log('websocket is Connected...')
      }
      this.terminalSocket.onclose = function () { // 连接关闭适触发的方法
        console.log('websocket is Closed...')
      }
      this.terminalSocket.onerror = function () { // 连接出错触发的方法
        console.log('damn Websocket is broken!')
      }
      this.term.attach(this.terminalSocket)  // 绑定黑窗口, 长久不发送消息自动断开连接
    }

}
</script>

<style>

</style>